import styled from 'styled-components';

export const HomeWrapper = styled.div`
    width:960px;
    margin:0 auto;
    overflow:hidden;
   
`;

export const HomeLeft = styled.div`
    margin-left:15px;
    padding-top:30px;
    float:left;
    width:625px;
    .banner-img{
        width:625px;
        height:240px
    }

    
`;

export const HomeRight = styled.div`
    width:280px;
    float:right;
`;

export const  TopicWrapper = styled.div`
 overflow:hidden;/*触发他的高度让浮动有浮动的空间*/
 padding:20px 0 10px 0;
 margin-left:-18px;
 border-bottom:1px solid #dcdcdc;
`;

export const  TopicItem =styled.div`
    float: left;
	height: 32px;
	line-height: 32px;
	margin-left: 18px;
	margin-bottom: 18px;
	padding-right: 10px
	background: #f7f7f7;
	font-size: 14px;
	color: #000;
	border: 1px solid #dcdcdc;
	border-radius: 4px;
	.topic-pic {
		display: block;
		float: left;
		width: 32px;
		height: 32px;
		margin-right: 10px;
	}
`;

export const ListItem = styled.div`
 overflow:hidden;/*可以解决浮动没有高度的问题*/
 padding:20px 0;
 border-bottom:1px solid #dcdcdc;
 .pic{
	 display:block;
	 width:125px;
	 height:100px;
	 float:right;
	 border-radius:10px;
	
 }
`;

export const ListInfo= styled.div`
  width:500px;
  float:left;
  .title{
	  line-height:27px;
	  font-size:18px;
	  font-weight:bold;
	  color:#333333;
  }
  .desc{
   	line-height:24px;
	font-size:13px;
	color:#999;
  }
`;

export const  RecommendWrapper = styled.div`
 overflow:hidden;/*触发他的高度让浮动有浮动的空间*/
 margin:30px 0;
 width:280px;
`;

export const  RecommendItem = styled.div`
width:280px;
height:50px;
background:url(${(props)=>props.imgUrl}) 0 0;
background-size:contain;
`;

export const  WriterWrapper = styled.div`
 width:278px;
 border-radius:3px;
 border: 1px solid #dcdcdc;
 height:300px;
 text-align:center;
`;

export const  LoadMore = styled.div`
 width:100%;
 height:40px;
 line-height:40px;
 background:#a5a5a5;
 text-align:center;
 border-radius:20px;
 color:#fff;
 margin:30px 0;
 cursor:pointer;
`;

export const  BackTop = styled.div`
 position:fixed;
 right:100px;
 bottom:100px;
 font-size:12px;
 width:60px;
 height:60px;
 line-height:60px;
 text-align:center;
 border-radius:2px;
 color:#CCC;
 border:1px solid #CCC;
 cursor:pointer;
`;